<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-300 w-full">



    <div class="  w-2/5  bg-white   rounded-lg shadow-xl  ">
      <!--  -->



      <div class="  space-y-5 p-3"   >
        <h1 class=" uppercase   text-center">register</h1>
        <div class="flex flex-col space-y-5"     @keyup.13='register()'      >
          <input placeholder="name" v-model="USERNAME_PASSWORD.username" />
          <input placeholder="password"  v-model="USERNAME_PASSWORD.password" />
        </div>
        <div class="flex  space-x-2  ">
          <button class="flex-1 bg-blue-300 py-3  rounded-md "           @click="register()">register</button>
        </div>
        <br>
        <a href="/" class="hover:text-green-300 ">回到首页</a>
      </div>

      <!--  -->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Header from "../components/Header";
export default {
  name: "Login",
  components: {Header},
  data() {
    return {
      USERNAME_PASSWORD: {
        username: '',
        password: ''
      },
    }
  },
  methods:{
    register(){
      let __this = this
      axios.post('/register', __this.USERNAME_PASSWORD).then(resp => {
        console.log(resp)
        console.log(resp.data.code)
        if (resp.data.code === 200){
          __this.$message.success("注册成功 ")
          setTimeout(()=>{
            __this.$router.push("/login")
          }, 888)
        }else {
          this.$message.error('  用户名已经存在了  ');
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
